<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guide</title>
    #required_css
    <link rel="stylesheet" href="$!basePath/app/docs.css">
</head>
<body>
<div class="container bs-docs-container">
    <div class="row">
        <div class="col-md-12" role="main">
            <div class="bs-docs-section">
                <h1 class="page-header">进度条</h1>
                <p class="lead">通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈</p>

                <h2>基本实例</h2>
                <div class="bs-example">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            <span class="sr-only">60% Complete</span>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
                                &lt;span class="sr-only"&gt;60% Complete&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>带有提示标签的进度条</h2>
                <div class="bs-example">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            60%
                        </div>
                    </div>
                    <p>在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。</p>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
                            0%
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
                            2%
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="progress"&gt;
                          &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
                            60%
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!--在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。--&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"&gt;
                                0%
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"&gt;
                                2%
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>

                <h2>根据情境变化效果</h2>
                <div class="bs-example">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>

                    <h3>条纹效果</h3>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>

                    <h3>动画效果</h3>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                            <span class="sr-only">45% Complete</span>
                        </div>
                    </div>

                    <h3>堆叠效果</h3>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" style="width: 35%">
                            <span class="sr-only">35% Complete (success)</span>
                        </div>
                        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
                            <span class="sr-only">20% Complete (warning)</span>
                        </div>
                        <div class="progress-bar progress-bar-danger" style="width: 10%">
                            <span class="sr-only">10% Complete (danger)</span>
                        </div>
                    </div>
                </div>
                <figure class="highlight">
                    <pre class="brush: javascript">
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"&gt;
                                &lt;span class="sr-only"&gt;40% Complete (success)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"&gt;
                                &lt;span class="sr-only"&gt;20% Complete&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"&gt;
                                &lt;span class="sr-only"&gt;60% Complete (warning)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"&gt;
                                &lt;span class="sr-only"&gt;80% Complete (danger)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;!--条纹效果--&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"&gt;
                                &lt;span class="sr-only"&gt;40% Complete (success)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"&gt;
                                &lt;span class="sr-only"&gt;20% Complete&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"&gt;
                                &lt;span class="sr-only"&gt;60% Complete (warning)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"&gt;
                                &lt;span class="sr-only"&gt;80% Complete (danger)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;!--动画效果--&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"&gt;
                                &lt;span class="sr-only"&gt;45% Complete&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;!--堆叠效果--&gt;
                        &lt;div class="progress"&gt;
                            &lt;div class="progress-bar progress-bar-success" style="width: 35%"&gt;
                                &lt;span class="sr-only"&gt;35% Complete (success)&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"&gt;
                                &lt;span class="sr-only"&gt;20% Complete (warning)&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="progress-bar progress-bar-danger" style="width: 10%"&gt;
                                &lt;span class="sr-only"&gt;10% Complete (danger)&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    </pre>
                </figure>
            </div>
        </div>
    </div>
</div>
</body>
#required_js
<script type="text/javascript" src="$!basePath/app/docs.js"></script>
</html>